<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>全部节目</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>状态</label></div>
                                    <div class="flex1">
                                        <select name="programStatus" id="">
                                            <option value="">全部</option>
                                            <option value="2" th:selected="2 == ${programStatus}">待发布</option>
                                            <option value="1" th:selected="1 == ${programStatus}">待审批</option>
                                            <option value="0" th:selected="0 == ${programStatus}">已审批</option>
                                            <option value="3" th:selected="3 == ${programStatus}">已过期</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>节目名称</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="名称" name="programName" th:value="${programName}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>更新开始时间</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="结束时间" name="startTime" class="fp-time" th:value="${startTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>更新结束时间</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="结束时间" name="endTime" class="fp-time" th:value="${endTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-default" id="export">导出</button>
                    </div>


                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>节目ID</th>
                        <th>节目名称</th>
                        <th>节目时长(s)</th>
                        <th>场景数</th>
                        <th>状态</th>
                        <th>更新时间</th>
                        <th>已下载终端数</th>
                        <th>下载失败终端数</th>
                        <th>下载终端总数</th>
                        </thead>
                        <tbody>
                        <tr th:each="program : ${result}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td>
                                <span th:text="${program.programId}"></span>
                            </td>
                            <td>
                                <span th:text="${program.programName}"></span>
                            </td>
                            <td>
                                <span th:text="${program.programDuration}"></span>
                            </td>
                            <td>
                                <span th:text="${program.sceneNum}"></span>
                            </td>
                            <td>
                                <span th:text="${program.programStatus}"></span>
                            </td>
                            <td>
                                <span th:text="${program.updateTime}"></span>
                            </td>
                            <td>
                                <span th:text="${program.downloadedDeviceNum}"></span>
                            </td>
                            <td>
                                <span th:text="${program.downloadFailDeviceNum}"></span>
                            </td>
                            <td>
                                <span th:text="${program.downloadDeviceSum}"></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="pagination z-pat z-fr"></div>

                </div>
            </div>
        </div>
    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script>
    var context = $("meta[name='ctx']").attr("content") || '';
    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var startTime = '[[${startTime}]]';
    var endTime = '[[${endTime}]]';
    var programStatus = '[[${programStatus}]]';
    var programName = '[[${programName}]]';
    console.log(startTime+","+endTime);
    $(function () {
        initDatePicker()
    })

    function initDatePicker() {
        flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文
        flatpickr(".fp-time", {
            // mode: "range",
            // 否启用时间选择
            enableTime: true,
            // 选择器中是否可以选择秒
            enableSeconds: true,
            time_24hr: true,
            dateFormat: 'Y-m-d H:i:S',
        });

    }

    // 加载select联动内容
    $('[name="searchType"] option').each(function (index, element) {
        if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
            $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })

        return temp.join(',');
    }

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var param = createQueryParam(pageIndex, pageSize);
            window.location.href = context + "/ckReport/allProgramReport" + isParamOk(param) ? "?" + param : "";
        }
    })

    function isParamOk(param) {
        if (null == param) {
            return false;
        }
        if ('' === param) {
            return false;
        }
        if (undefined === param) {
            return false;
        }
        return true;
    }

    /**
     * 拼接请求参数
     * @param pageNum
     * @param pageIndex
     */
    function createQueryParam(pageIndex, pageSize) {
        var param = '';
        if (isParamOk(pageSize)) {
            param += "&pageSize=" + pageSize;
        }
        if (isParamOk(pageIndex)) {
            param += "&pageNum=" + pageIndex;
        }
        if (isParamOk(programStatus)) {
            param += "&programStatus=" + programStatus;
        }
        if (isParamOk(programName)) {
            param += "&programName=" + programName;
        }
        if (isParamOk(startTime)) {
            param += "&startTime=" + startTime;
        }
        if (isParamOk(endTime)) {
            param += "&endTime=" + endTime;
        }
        if (isParamOk(param)) {
            param = param.substring(1);
        }
        return param;
    }

    //导出excel
    $('#export').click(function () {
        var url = context + "/cpReport/allProgramExport";
        var paramStr = createQueryParam(null, null);
        if (paramStr !== "") {
            url = url + "?" + paramStr;
        }
        window.location.href = url;
    });
</script>
</body>

</html>